<template>
<div class="selector" :style="'width:'+Width+'px'" v-focus>
    <SelectorInput :placeholder="placeholder" :value="inputValue" @searchOptions="searchOptions" />
    <SelectorMenu :data="data" @setItemValue="setItemValue" :searchValue="searchValue"></SelectorMenu>
</div>
</template>

<script>
import SelectorInput from './input'
import SelectorMenu from './Menu'
import focus from '../../directives/focus';
import {
    reactive,
    toRefs
} from 'vue'
export default {
    name: "Selector",
    directives: {
        focus
    },
    props: {
        placeholder: String,
        data: Array,
        Width: {
            type: Number,
            default: 300
        },
    },
    components: {
        SelectorInput,
        SelectorMenu
    },
    setup(props, ctx) {
        const state = reactive({
            inputValue: '',
            searchValue: '',
        })

        const searchOptions = (value) => {
            state.searchValue = value
        }

        const setItemValue = (item) => {
            state.inputValue = item.text
            ctx.emit('setItemValue', state.inputValue)
        }

        return {
            ...toRefs(state),
            setItemValue,
            searchOptions
        }
    }
}
</script>

<style lang="scss" scoped>
.selector {
    position: relative;
    line-height: 16px;
}
</style>
